<template>
<view>
<view  style="background-color: #B8D4FD; width:100%; height:10px;">
</view>

<view class="gradient-background" style="border: 0px solid red; width:100%; display:flex; justify-content: center; align-items: center; " >
		<view class="showfile"  >
			<image style="width: 100%; height: 100%"  
			:src="imageData" mode="aspectFill"  @click="chooseFile()"   />
		</view >
</view >			
	<view style="border: 0px solid red; width:100%; height:50px; display:flex; justify-content: center; align-items: center; " >
	点击可更换图片
	</view >
	</view>
	
	
	<view style="border: 0px solid red; width:100%; height:150px; display:flex; justify-content: center; align-items: center; " >

	</view >
	<view style="border: 0px solid red; width:100%; height:50px; display:flex; justify-content: center; align-items: center; " >
		<TnButton bg-color="#FFFFFF"  text-color="black" size="xl" type="primary"  width="80%" @click="chooseFile()"  > 上传照片 </TnButton>
	</view >
		
	<view style="border: 0px solid red; width:100%; height:50px; display:flex; justify-content: center; align-items: center; " >
		<TnButton bg-color="#5A4EFF" text-color="#FFFFFF" size="xl" type="primary" width="80%"  @click="uploadFile()"  > 开始评测 </TnButton>
	</view >
 
	
					
		  
</template>

<script lang="ts"  setup>
	import { ref } from 'vue'
	import TnButton from '@/uni_modules/tuniaoui-vue3/components/button/src/button.vue'
	import TnImageUpload from '@/uni_modules/tuniaoui-vue3/components/image-upload/src/image-upload.vue'
	import TnIcon from '@/uni_modules/tuniaoui-vue3/components/icon/src/icon.vue'
	import { uploadHeaderImage } from '@/api/upImageFile'
	import { realUserInfo,userInfo } from '@/api/login'
	
	const imageData   = ref("https://duxinai.com/images/default.jpg")
	const updateImage = ref(false)
	const chooseFile = () => {
		uni.chooseImage({
		  success: chooseImageRes => {
		    const tempFilePaths = chooseImageRes.tempFilePaths;
			imageData.value = tempFilePaths[0] 
			uni.showToast({ title: "上传成功", icon: 'success', duration: 3000  })
			updateImage.value = true
		  }
		});
		
		
	}
	
	const uploadFile = () => {
		realUserInfo().then(res => {
			if(res.data.countnum<=0){
				uni.showToast({
				  icon: 'none',
				  title: '用户剩余点数不足，请充值后再测试' ,
				  duration: 3000 
				})
				return;
			}else{
				if(updateImage.value == true){
					uni.redirectTo({
						url:'/pages/result/result?file='+imageData.value
					});
				}else{
					uni.showToast({
					  icon: 'none',
					  title: '您还没有上传头像' ,
					  duration: 3000 
					})
				}
			}
		}).catch(error => {
			uni.showToast({
			  icon: 'error',
			  title: '获取用户信息失败',
			  duration: 3000 // 持续时间为3000毫秒，即3秒
			})
		})

		
	}
	
	
</script>

<style>

page {
  background-color: #E3EBF6;
}


.upfile{
	border: 0px solid red;
	width: 200px;
	height:200px;
	
	display: none;
	justify-content: center;
	align-items: center;
}

.showfile{
	border: 0px solid red;
	width:200px;
	height:250px;
}

.gradient-background {
  background-image: linear-gradient(to bottom, #B8D4FD, #EAEEF5);
  height: 100%; /* 确保背景覆盖整个页面 */
  width:  100%;
}

</style>
